<template>
  <div class="week-time">
    <div class="first">
      全天
    </div>
    <!--00:00-07:00-->
    <div class="morning cursor" @click="changeMorningHidden" v-show="!morningHidden">
      <div v-for="(item,index) in weekTime" :key="index+'time'" v-if="index>0&&index<8" class="some">
        {{item.name}}
      </div>
      <div class="tags-info">
        <div class="shixin"></div>
        点击收起 00:00-07:00
      </div>
    </div>
    <div v-show="morningHidden" class="hidden-morning cursor"  @click="changeMorningHidden">
      <div class="second">
        00:00 07:00
      </div>
      <div class="tags-info">
        <div class="shixin"></div>
        点击展开 00:00-07:00
      </div>
    </div>
    <!--08:00-20:00-->
    <div v-for="(item,index) in weekTime" :key="index+'time'" v-if="index>7&&index<21" class="some">
      {{item.name}}
    </div>
    <!--21:00-23:00-->
    <div class="night cursor"  @click="changeNightHidden" v-show="!nightHidden">
      <div v-for="(item,index) in weekTime" :key="index+'time'" v-if="index>20" class="some">
        {{item.name}}
      </div>
      <div class="tags-info">
        <div class="shixin"></div>
        点击收起 21:00-00:00
      </div>
    </div>
    <div v-show="nightHidden" class="night-morning cursor" @click="changeNightHidden">
      <div class="last">
        21:00 00:00
      </div>
      <div class="tags-info">
        <div class="shixin"></div>
        点击展开 21:00-00:00
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "LeftTime",
    props:{
      weekTime:Array,
      morningHidden:Boolean,
      nightHidden:Boolean,
    },
    methods:{
      changeMorningHidden(){
        this.$emit("changeMorningHidden",!this.morningHidden)
      },
      changeNightHidden(){
        this.$emit("changeNightHidden",!this.nightHidden)
      }
    }
  }
</script>

<style scoped lang="less">
  .week-time{
    width: 90px;
    height: 100%;
    text-align: right;
    color:#000;
    margin-top: 50px;
    .tags-info{
      background-color: #fff;
      box-shadow: 0 5px 10px 5px var(--KWebDialog-color-shadow,rgba(0,0,0,.2));
      border-radius: 4px;
      padding: 4px 8px;
      position: absolute;
      left: 95px;
      z-index: 100;
      display: none;
      .shixin{
        width:0;
        height:0;
        border:6px solid transparent;
        border-right-color:red;
        position: absolute;
        top: 8px;
        left:-12px;
      }
    }
    .cursor{
      cursor: pointer;
    }
    .morning:hover{
      background-color: #F0F2F4;
      .tags-info{top:290px;display: block;}
    }
    .hidden-morning:hover{
      .tags-info{top:60px;display: block;}
    }
    .night{
      position: relative;
    }
    .night:hover{
      background-color: #F0F2F4;
      .tags-info{width: 150px;bottom:80px;display: block;}
    }

    .night-morning:hover{
      position: relative;
      .tags-info{width: 150px;bottom:10px;display: block;}
    }
    .first{
      width: 90px;
      height: 50px;
      line-height: 50px;
      padding:0 10px;
      position: fixed;
      margin-top: -50px;
      background-color: #fff;
      border-bottom: 1px solid #F0F2F4;

    }
    .second{
      height: 50px;
      padding:5px 10px;
      margin-bottom: 50px;
      background-color: #F0F2F4;
    }
    .last{
      height: 50px;
      padding:5px 10px;
      margin-top: 50px;
      background-color: #F0F2F4;
    }
    .some{
      height: 100px;
      line-height: 100px;
      padding:0 10px;
    }

  }
</style>